<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 400px;
            border: 1px solid #000;
            border-collapse: collapse;
            margin: 0 auto;
        }

        td,
        th {
            border: 1px solid #000;
            text-align: center;
        }

        input {
            width: 50px;
            vertical-align: middle;
        }

        .search {
            width: 600px;
            text-align: center;
            margin: 20px auto;
        }

        .module {
            display: none;
            position: fixed;
            width: 350px;
            height: 50px;
            line-height: 50px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            z-index: 1;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .3);
        }

        .close {
            position: absolute;
            top: -15px;
            right: 3px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="search">
        价格: <input type="text" class="start"> - <input type="text" class="end">
        名称：<input type="text" class="product">
        <button class="search-pro">查询</button> <button class="add-pro">添加</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>产品名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <!-- 模态框 -->
    <div class="search module">
        <div class="close">&times;</div>
        名称：<input type="text" class="pname">
        价格: <input type="text" class="price">
        <button class="add">确定</button>
    </div>

    <script>
        // 利用新增数组方法操作数据
        var data = [{
            id: 1,
            pname: '小米',
            price: 3999
        }, {
            id: 2,
            pname: 'oppo',
            price: 999
        }, {
            id: 3,
            pname: '荣耀',
            price: 1299
        }, {
            id: 4,
            pname: '华为',
            price: 1999
        },];

        // 获取元素
        const tbody = document.querySelector('tbody');
        const searchPro = document.querySelector('.search-pro');
        const addPro = document.querySelector('.add-pro');
        const start = document.querySelector('.start');
        const end = document.querySelector('.end');
        const product = document.querySelector('.product');

        // 模态框
        const module = document.querySelector('.module');
        const pname = document.querySelector('.pname');
        const price = document.querySelector('.price');
        const add = document.querySelector('.add');
        const close = document.querySelector('.close');

        // 初始化
        setData(data);
        function setData(myData) {
            let arr = [];
            myData.forEach(el => arr.push(`<tr><td>${el.id}</td><td>${el.pname}</td><td>${el.price}</td></tr>`));
            tbody.innerHTML = arr.join('\n');
        }

        // 注册事件
        searchPro.addEventListener('click', () => {
            myData = data.filter(el => {
                let search = true;
                // 价格范围查询
                if (start.value && end.value)
                    search = search && el.price >= Math.min(start.value, end.value) && el.price <= Math.max(start.value, end.value);
                else if (start.value)
                    search = search && el.price >= start.value;
                else if (end.value)
                    search = search && el.price <= end.value;
                // 名称模糊查询
                if (product.value)
                    search = search && el.pname.indexOf(product.value) !== -1
                return search;
            });
            setData(myData);
        });

        // 显示模态框
        addPro.addEventListener('click', showModule);
        function showModule() {
            // 添加蒙版
            document.body.insertAdjacentHTML('beforeend', '<div class="mask"></div>');
            // 显示模态框
            module.style.display = 'block';
        }

        // 关闭模态框
        close.addEventListener('click', closeModule);
        function closeModule() {
            // 移除蒙板
            document.body.querySelector('.mask').remove();
            // 隐藏模态框
            module.style.display = 'none';
            // 清空默认值
            pname.value = '';
            price.value = '';
        }

        // 添加数据
        add.addEventListener('click', () => {
            let id = data.length + 1;
            let myData = { id, pname: pname.value, price: price.value };
            data.push(myData);
            setData(data);
            // 关闭模态框
            closeModule();
        });

    </script>
</body>

</html>